<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="studentQuery.mobile" placeholder="手机号"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="studentQuery.nickname" placeholder="昵称"/>
      </el-form-item>

      <el-form-item>
        <el-select v-model="studentQuery.sex" clearable placeholder="性别">
          <el-option value="1" label="女"/>
          <el-option value="2" label="男"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="studentQuery.isDisabled" clearable placeholder="是否禁用">
          <el-option value="1" label="禁用"/>
          <el-option value="0" label="未禁用"/>
        </el-select>
      </el-form-item>

      <el-form-item label="添加时间">
                <el-date-picker
                v-model="studentQuery.begin"
                type="datetime"
                placeholder="选择开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="00:00:00"
                />
            </el-form-item>
            <el-form-item>
                <el-date-picker
                v-model="studentQuery.end"
                type="datetime"
                placeholder="选择截止时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="00:00:00"
                />
            </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="list"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        width="50"
        align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="mobile" label="手机号" width="130" />
      <el-table-column prop="nickname" label="昵称" width="140" />
      <el-table-column label="性别" width="50">
        <template slot-scope="scope">
          {{ scope.row.sex===1?'女':'男' }}
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="50" />

      <el-table-column label="是否禁用" width="100">
        <template slot-scope="scope">
          <el-button
            size="mini"
            :type="scope.row.isDisabled === 1 ? 'danger' : 'primary'"
            @click="disabledStudent(scope.row)">{{scope.row.isDisabled === 1?'已禁用':'未禁用'}}</el-button>
        </template>
      </el-table-column>

      <el-table-column label="是否删除" width="100">
        <template slot-scope="scope">
          <el-button
            size="mini"
            :type="scope.row.isDeleted === 1 ? 'danger' : 'primary'"
            @click="deletedStudent(scope.row)">{{scope.row.isDeleted === 1?'已删除':'未删除'}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate" label="注册时间" width="180" />
      <el-table-column prop="avatar" label="头像地址" show-overflow-tooltip='true'/>
      

    </el-table>

  </div>
</template>
<script>
//引入调用student.js文件
import studentApi from '@/api/edu/student'

export default {
    //写核心代码位置
    // data:{
    // },
    data() { //定义变量和初始值
        return {
          list:null,//查询之后接口返回集合
          studentQuery:{} //条件封装对象
        }
    },
    created() { //页面渲染之前执行，一般调用methods定义的方法
        //调用
        this.getList() 
    },
    methods:{  //创建具体的方法，调用student.js定义的方法
        //获取学生列表的方法
        getList() {
            studentApi.getAllStudents(this.studentQuery)
                .then(response =>{//请求成功
                    //response接口返回的数据
                    this.list = response.data.records
                })
        },
        resetData() {//清空的方法
            //表单输入项数据清空
            this.studentQuery = {}
            //查询所有学生
            this.getList()
        },
        disabledStudent(row){
          if(!row.isDisabled == 1){//未禁用
            this.$confirm('是否禁用该学生：'+row.nickname+'?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              studentApi.disabledStudent(row.id,'1')
                .then(res => {
                  this.getList()
                  this.$message({
                    type: 'success',
                    message: '禁用成功!'
                  });
                })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });          
            });
          }else{//已经禁用了
            this.$confirm('是否解禁该学生：'+row.nickname+'?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              studentApi.disabledStudent(row.id,'0')
                .then(res => {
                  this.getList()
                  this.$message({
                    type: 'success',
                    message: '解禁成功!'
                  });
                })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });          
            });
          }
        },
        deletedStudent(row){
          if(!row.isDeleted == 1){//未删除
            this.$confirm('是否永久删除该账号：'+row.nickname+'？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              studentApi.removeStudent(row.id)
                .then(res => {
                  this.getList()
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });          
            });
          }else{//已经禁用了
            this.$message('该学生已经删除了');
          }
        }
 
    }
}
</script>
<style>

</style>